<template>
	<div class="login">
		<header>
			<router-link to="/mobile/myhome"> < </router-link>
			<h3>登录</h3>
		</header>
		<div class="div1" v-show="$store.state.role!=null">
			<p>Login</p>
			<div class="text">
				<input v-model="user.username" type="text" placeholder="账号"/>
			</div>
			<div class="text">
				<input v-model="user.password" type="text" placeholder="密码"/>
			</div>
			<div class="btn">
				<button @click="login()">登录</button>
			</div>
		</div>
	</div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
	name:'MobileLogin',
	data(){
		return{
			user:{},
		}
	},
	methods:{
		...mapActions(['set']),
		login(){
			this.$postkv('/api/login',this.user).then((resp)=>{
				let token = resp.data.data.token;
				window.localStorage.setItem("token",token);
				this.$get('/api/user/info').then((resp)=>{
					this.user=resp.data.data;
					console.log(this.user);
					
					this.set({
						account : resp.data.data.account,
						img : resp.data.data.img,
						name : resp.data.data.name,
						role : resp.data.data.role
					})
					
					this.$router.push({path:'/mobile/myhome'});
					})
					
					this.$message({
						 message:resp.data.msg,
						 type:'success',
					})
			})
		},
	}
}
</script>

<style scoped>
.login{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
}
.login header{
	width: 96%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.login header a{
	color: #3d3d3d;
	font-size: 2rem;
}
.login header h3{
	color: #3d3d3d;
	margin-left: 10rem;
}
.div1{
	width: 90%;
	height: 24rem;
	margin: 0 auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: linear-gradient(
		to right bottom,
		rgba(255,155,155,.7),
		rgba(255,155,155,.5),
		rgba(255,155,155,.4),
	);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 6px #cacaca;
	border-radius: 10px;
}
.div1 p{
	padding: 30px;
	font: 900 30px '';
	text-align: center;
	letter-spacing: 3px;
	color: #3d3d3d;
}
.div1 .text{
	width: 96%;
	margin: 0 auto;
	overflow: hidden;
}
.div1 .text input{
	width: 100%;
	margin-bottom: 20px;
	outline: none;
	border: 0;
	padding: 10px;
	background-color: transparent;
	border-bottom: 2px solid #555555;
	font: 900 14px '';
}
.div1 .btn{
	padding-top: 40px;
	text-align: center;
}
.div1 button{
	width: 200px;
	height: 40px;
	font: 900 16px '';
	letter-spacing: 3px;
	border-radius: 6px;
	border: none;
	color: white;
	background-color: #999999;
}
</style>
